<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import form from '../widget.form.js'
  import input from '../widget.form.input.js'
  import {compare} from '../widget.common.js'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Spinner',
        remark: '数字输入框',
        extends: [form, input],
        attrs: [
          compare,
          {
            name: 'auto-fix',
            type: 'Boolean',
            remark: '是否自动修正不符合规范的数字',
            default: 'true'
          },
          {
            name: 'button-position',
            type: 'String',
            remark: '加减按钮的位置',
            option: '<var>right</var> <var>between</var>',
            default: 'right'
          },
          {
            name: 'clearable',
            type: 'Boolean',
            remark: '是否可以清空',
            option: '',
          },
          {
            name: 'decimal',
            type: 'Number',
            remark: '设置整数或小数模式',
            option: `<div><var>0</var>: 只允许输入整数</div>
              <div style="margin:3px 0"><var>-1</var>: 不限整数和小数</div>
              <div><var>正整数</var>: 限制小数的最大位数</div>
              `,
            default: '0',
          },
          {
            name: 'format',
            type: 'Object',
            remark: '设置分隔格式<var>{length, separator, rightward}</var>',
            option: `<div><var>length</var>: Number 分隔长度。默认值为 3</div>
              <div style="margin:3px 0"><var>separator</var>: String 分隔符。默认值为 ","</div>
              <div><var>rightward</var>: Boolean 是否从左向右的方向进行分隔</div>`,
            default: ''
          },
          {
            name: 'max-value',
            remark: '最大值。可以是数字或<var>{value, text}</var>',
            type: 'Number',
            option: '<div><var>value</var>: RegExp</div><div><var>text</var>: 验证提示内容</div>',
          },
          {
            name: 'min-value',
            remark: '最小值。可以是数字或<var>{value, text}</var>',
            type: 'Number / Object',
            option: '<div><var>value</var>: RegExp</div><div><var>text</var>: 验证提示内容</div>',

          },
          {
            name: 'show-button',
            type: 'Boolean',
            remark: '是否显示加减按钮',
            default: 'true'
          },
          {
            name: 'step',
            type: 'Number',
            remark: '递增/递减的数值',
            default: '1'
          },
        ],
        examples: [
          {
            remark: '普通用法',
            type: 'html',
            view: true,
            type: 'html',
            code: `
              <template>
                <w-spinner name="content" :label="{text: '数量'}"></w-spinner>
              </template>
              `
          },
          {
            remark: '按钮左右布局',
            type: 'html',
            view: true,
            type: 'html',
            code: `
              <template>
                <w-spinner name="content" :label="{text: '数量'}" button-position="between"></w-spinner>
              </template>
              `
          },
          {
            remark: '输入框后面带文本',
            type: 'html',
            view: true,
            type: 'html',
            code: `
              <template>
                <w-spinner name="content" :label="{text: '数量'}">
                  <template #after>
                    <span style="padding-left: 10px">个</span>
                  </template>
                </w-spinner>
              </template>
              `
          },
          {
            remark: '千分位逗号',
            type: 'html',
            view: true,
            type: 'html',
            code: `
              <template>
                <w-spinner name="content" :label="{text: '数量'}" :format="{length: 3, separator: ','}" modelValue="1234567"></w-spinner>
              </template>
              `
          },
          {
            remark: '输入银行卡号，去掉button',
            type: 'html',
            view: true,
            type: 'html',
            code: `
              <template>
                <w-spinner name="content" :label="{text: '卡号'}" input-width="*" :format="{length: 4, separator: ' ', rightward: true}" :show-button="false" modelValue="1234567890123456789"></w-spinner>
              </template>
              `
          },
        ]
      }
    }
  }
</script>

<style>
</style>
